<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组件二（props）</title>
    <script src="../vue.js"></script>

</head>
<body>
<div id="div18">
    <my-div></my-div>
  <my-prop :tl="text"></my-prop>
</div>

</body>
<script>
    //props 属性
    Vue.component("my-prop",{
        props:['tl'],
        template:'<h2>{{tl}}</h2>'

    })
    new Vue({
        el:"#div18",
        data:{
            text:"您好！我是西西"
        },
        components:{
            'my-div':{
               data: function () {
                   return{
                      name:"西西",
                       age:15,
                       sex:""
                   }
               } ,
                methods: {
                   getdata:function (sex) {
                      console.log(sex)
                   }
                },
                template: `<div>
                    我是{{name}},今年{{age}}
                    <my-son :username="name" :userage="age" @sexo="getdata"></my-son>
                </div>`,
                components:{
                   "my-son":{
                       template:
                           `<div>
                             我是子组件{{username}},{{userage}}
                           <button @click="send">发送</button>
                            </div>`,
                       // props: ['username','userage']
                       props: {
                           username: {
                               type: String,
                               required: true,
                               validator: function (name) {
                                   //这个值必须匹配下列字符串中的一个
                                   return ["11","22","西西"].indexOf(name)!==-1

                               }
                           },
                           userage:{
                               type:Number,
                               default:0,
                               required:true,
                               validator:function (age) {
                                   if (age>0 && age<=50){
                                       return age
                                   }

                               },
                               data:function () {
                                   return{
                                       usersex:"女"
                                   }

                               },

                               methods:{
                                   send:function () {
                                       this.$emit("sexo",this.usersex)


                                   }
                               }
                           }
                       }
                   },

                }
            },
        }


    })
</script>
</html>